<template>
  <div>
    <div>当前计数: {{ current }}</div>
    <div>
      <label>最小值:</label>
      <input type="number" v-model="range.min" />
    </div>
    <div>
      <label>最大值:</label>
      <input type="number" v-model="range.max" />
    </div>
    <div>
      <button @click="set(setVal)">设置值：</button>
      <input type="number" v-model="setVal" />
    </div>
    <button @click="plus(5)">+5</button>
    <button @click="minus(3)">-3</button>
    <button @click="reset()">重置</button>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';
import { CountRange, useCount } from './useCount';
const setVal = ref<number>(16);
const range: CountRange = reactive({
  min: 5,
  max: 50
});
const { current, minus, plus, set, reset } = useCount(10, range);
</script>
